<template>
	<view class="root">
		
		<view class="c1 u-flex">
			<view class="c2 u-flex" @click="$u.route('/pagesA/citylist')">
				<u-icon name="map" color="#555" size="35"></u-icon>
				<text class="c4">深圳</text>
			</view>
			<view class="c3 u-flex">
				<u-icon name="search" color="#ccc" size="36"></u-icon>
				<view>
					<input type="text" placeholder="书画家、艺术家、拍卖品">
				</view>
			</view>
		</view>
		<view class="u-p-30">
			<u-swiper :list="list" border-radius="10"></u-swiper>
		</view>
		
		<view class="c5">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画邀约</view>
				<view class="c8 u-flex" @click="goToInvite">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9" @click="goToInvite">
			   <customSwiper :swiper-list="swiperList" />
			</view>
		</view>
		
		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画商城</view>
				<view class="c8 u-flex" @click="goToMall">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<div class="u-flex">
						<view v-for="(v,index) in swiperList" :key="index" class="c11" @click="goToMall">
							<image :src="v.url"></image>
							<view class="u-line-2 c12">{{v.text}}</view>
						</view>
					</div>

				</scroll-view>
			</view>
		</view>
		
		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画艺拍</view>
				<view class="c8 u-flex" @click="goToAution">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<div class="u-flex">
						<view v-for="(v,index) in swiperList" :key="index" class="c11" @click="goToAution">
							<image :src="v.url"></image>
							<div class="c19">限时拍卖</div>
							<view class="u-line-2 c12">{{v.text}}</view>
						</view>
					</div>
		
				</scroll-view>
			</view>
		</view>

		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">艺术家</view>
				<view class="c8 u-flex" @click="goToArtist">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<div class="u-flex">
						<view v-for="(v,index) in swiperList" :key="index" class="c11" @click="goToArtist">
							<div class="c14">
								<image :src="v.url"></image>
								<view class="u-line-1 c12">{{v.name}}</view>
							</div>
						</view>
					</div>

				</scroll-view>
			</view>
		</view>
		
		<view class="c5">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画培训</view>
				<view class="c8 u-flex" @click="goToArtcultivate">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9"  @click="goToCultivate">
				<div class="c14 u-flex">
					<div class="c15"></div>
					<div class="c16">
						<div class="c17"></div>
						<div class="c17 c18"></div>
					</div>
					
				</div>
			</view>
		</view>
		
		
		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画装裱</view>
				<view class="c8 u-flex" @click="goToPiclist">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<div class="u-flex">
						<view v-for="(v,index) in mountList" :key="index" class="c11"  @click="goToPiclist">
							<div class="c14">
								<image :src="'http://cnmeibao.com/'+v.writer_img"></image>
								<view class="u-line-1 c12">{{v.user_name}}</view>
							</div>
						</view>
					</div>
		
				</scroll-view>
			</view>
		</view>
		
		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">品牌机构</view>
				<view class="c8 u-flex" @click="goToOrganization">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
			<view class="c9">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<div class="u-flex">
						<view v-for="(v,index) in list" :key="index" class="c21" @click="goToOrganization">
							<div class="c20">
								<image :src="v.image" mode="widthFix"></image>
								<view class="u-line-1 c12">{{v.title}}</view>
							</div>
						</view>
					</div>
				</scroll-view>
			</view>
		</view>
		
		<view class="c5 c13">
			<view class="c6 u-flex u-row-between">
				<view class="c7 mbsh">书画头条</view>
				<view class="c8 u-flex" @click="goToHeadline">
					<text>更多</text>
					<u-icon name="arrow-right" color="#aaa" size="28"></u-icon>
				</view>
			</view>
	<view class="headline" v-for="(item,index) in headlineList" :key="index">
    <view style="width: 186rpx;height: 258rpx;">
			<image :src="item.url" mode=""></image>
		</view>
		<view class="detail">
			<view class="title">
				<text>{{item.title}}</text>
			</view>
			<view class="time">
				<text>展览时间：{{item.time}}</text>
			</view>
			<view class="amount">
				<text>{{item.amount}}人看过</text>
			</view>
			<view class="address">
				<text>{{item.address}}</text>
			</view>
		</view>
			</view>
		</view>
		
		<!-- <view style="height: 100rpx;"></view> -->
		
		<diy-bottom-nav></diy-bottom-nav>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
import customSwiper from '@/components/blackmonth-swiper/index'
export default {
	components: { customSwiper },
	data() {
		return {
			imageUrl:'',
			headlineList: [
				{
					title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
					time:'2021-10-10至2021-11-20',
					amount:'9877',
					address: '杭州西卡艺术中心',
					url:'../../../static/kn.jpg'
				},
				{
					title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
					time:'2021-10-10至2021-11-20',
					amount:'9877',
					address: '杭州西卡艺术中心',
					url:'../../../static/kn.jpg'
				},
				{
					title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
					time:'2021-10-10至2021-11-20',
					amount:'9877',
					address: '杭州西卡艺术中心',
					url:'../../../static/kn.jpg'
				},
				{
					title:'第27届“艺庐雅集”在杭州西卡艺术中心圆满举办',
					time:'2021-10-10至2021-11-20',
					amount:'9877',
					address: '杭州西卡艺术中心',
					url:'../../../static/kn.jpg'
				}
			],
			swiperList: [
				{
					type: 'image',
					name:'陈忠洲1',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲2',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲3',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲4',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲5',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲1',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				},
				{
					type: 'image',
					name:'陈忠洲2',
					text:'昨夜星辰昨夜风，画楼西畔桂堂东',
					url: 'http://qiniu.hk.88an.top/20200306img9c18f7936.jpg'
				}
			],
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			mountList:[]
		}
	},
	//下拉刷新
	async onPullDownRefresh() {
		// await this.getDiyIn
	},
	onLoad(data) {
		// 获取书画装裱
		this.$api.sendRequest({
			url: 'api/index/getMounted',
			methods:'get',
			success: res => {
					console.log(res)
					if(res.code === 0){
						this.mountList = res.data
						mountList.forEach()
					}
			},
			fail: () => {
			}
		}),
		
		this.siteId = parseInt(data.site_id) || 0;
		this.isIphoneX = this.$util.uniappIsIPhoneX();

		if (data.web_city) {
			uni.setStorageSync('city', {
				id: data.web_city,
				title: decodeURI(data.title)
			});
		}

		// 如果传入站点id，则清空地址
		if (this.siteId) uni.removeStorageSync('city');

		if (data.source_member) uni.setStorageSync('source_member', data.source_member);

		// 小程序扫码进入
		if (data.scene) {
			var sceneParams = decodeURIComponent(data.scene);
			sceneParams = sceneParams.split('&');
			if (sceneParams.length) {
				sceneParams.forEach(item => {
					if (item.indexOf('source_member') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
				});
			}
		}
	},
	onHide() { 

	},
	onShow() {

	},
	onPageScroll(e) {

	},
	methods: {
		goToHeadline(){
			uni.navigateTo({
			 url:'../../../pagesB/headline/list/list'
			})
		},
		goToOrganization(){
			uni.navigateTo({
			 url:'../../../pagesB/brand/organization/organization'
			})
		},
		goToPiclist(){
			uni.navigateTo({
			 url:'../../../pagesB/piclist/piclist'
		  })
		},
		goToArtcultivate(){
			uni.navigateTo({
			 url:'../../../pagesB/artcultivate/artcultivate'
			})
		},
		goToArtist(){
			uni.navigateTo({
			 url:'../../../subpackages/artist/index/index'
			})
		},
		goToInvite(){
			uni.navigateTo({
			 url:'../../../subpackages/invite/invite'
			})
		},
		goToMall(){
			uni.navigateTo({
			 url:'../../../pagesB/mall/index/index'
		  })
		},
		goToAution(){
			uni.navigateTo({
				url:'../../../pagesB/auction/finish/finish'
			})
		},
		callback() {
			if (this.$refs.indexPage) {
				this.$refs.indexPage.initPageIndex();
			}
		},
		async refresh() {
			this.$langConfig.refresh();

			if (uni.getStorageSync('token')) {
				this.getMemberId();
				}
		
			this.$store.dispatch('defaultImg');
			this.$store.dispatch('getThemeStyle');
			this.getWebSitefo();

			if (uni.getStorageSync('city')) {
				this.city = uni.getStorageSync('city').title;
			} else {
				uni.setStorageSync('city', {
					id: 0,
					title: '全国'
				});
				this.city = '全国';
			}

		},


		closePopupWindow() {
			this.$refs.uniPopupWindow.close();
			uni.setStorageSync('index_popwindow_count', -1);
		},
		closeCollectPopupWindow() {
			this.$refs.collectPopupWindow.close();
			uni.setStorageSync('isCollect', true);
		},
		redirectTo(link) {
			this.$util.diyRedirectTo(link);
		},
		getMemberId() {
			this.$api.sendRequest({
				url: '/api/member/id',
				success: res => {
					if (res.code >= 0) {
						this.memberId = res.data;
					}
				}
			});
		},
		getWebSitefo() {
			this.webSiteInfo = uni.getStorageSync('web_site_info');
			if (this.webSiteInfo) this.webSiteInfo = JSON.parse(this.webSiteInfo);
			this.$api.sendRequest({
				url: '/api/website/info',
				success: res => {
					let data = res.data;
					if (data) {
						this.webSiteInfo = data;
						if (this.webSiteInfo.wap_status) return;
						this.$refs.uniPopupClose.open();
						uni.setStorageSync('web_site_info', JSON.stringify(this.webSiteInfo));
					}
				}
			});
		},
		// #ifdef MP-WEIXIN
		// 分享到微信朋友圈
		onShareTimeline() {
			let query = '';
			if (this.memberId) query = 'source_member=' + this.memberId;
			return {
				title: '',
				query: query,
				imageUrl: ''
			};
		}
		// #endif
	},
	onShareAppMessage(res) {
		var title = '';
		if (this.webSiteInfo) title = this.webSiteInfo.title;
		var path = '/pages/index/index/index';
		var city = uni.getStorageSync('city');

		if (city.id) path += '?name=DIY_VIEW_CITY_INDEX&web_city=' + city.id + '&title=' + encodeURI(city.title);
		if (city.id && this.memberId) {
			path += '&source_member=' + this.memberId;
		} else if (this.memberId) {
			path += '?source_member=' + this.memberId;
		}
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	},
	onReady() {

	}
};
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: "mbsh";
		src: url("http://qiniu.other.88an.top/meibaoshuhua.otf")
	}
	
	.mbsh{
		font-family: 'mbsh' !important;
	}
	
	.headline {
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;
		width: 90%;
		margin: 5%;
	}
	
	.headline image {
		width: 186rpx;
		height: 258rpx;
		border-radius: 10rpx;
	}
	
	.detail {
		border-bottom: 2rpx solid #E8E8E8;
		margin-left: 20rpx;
	}
	
	.detail .title {
		font-size: 30rpx;
		font-weight: 700;
		color: #262626;
	}
	
	.detail .time {
    color: #888888;
    font-size: 24rpx;
	}
	
	.detail .amount {
		width: 142rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		background-color: #f8e8e6;
		color: #C6100E;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	
	.detail .address {
		color: #888888;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.root{padding:0 0 30rpx;}
	.c1{padding: 0 30rpx;}
	.c2{margin-right: 30rpx;}
	.c3{border:2rpx solid #C6100E;flex:1;border-radius: 56rpx;padding: 0 20rpx;height: 56rpx;}
	.c3 input{width: 100%;font-size: 28rpx;margin-left: 20rpx;line-height: 52rpx;}
	.c4{margin-left: 10rpx;}
	.c5{border-bottom:20rpx solid #f6f6f6;padding: 0 30rpx 20rpx;}
	.c6{margin: 20rpx auto;}
	.c7{font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;font-size: 38rpx;}
	.c8{color: #888888;}
	.c8 text{margin-right: 6rpx;}
	.c8 .u-icon{position: relative;top:2rpx;}
	.c10{width: 100px!important;}
	.c10 image{width: 100px;}
	.c11{width: 120px;padding: 0 10rpx;position: relative;}
	.c11:last-child{padding-right: 30rpx;}
	.c11 image{width: 200rpx;height: 200rpx;border-radius: 10rpx;}
	.c12{line-height: 40rpx;}
	.c13{padding: 10rpx 0 40rpx;}
	.c13 .c6{padding: 0 30rpx;}
	.c13 .c9{padding-left:20rpx;}
	.c13 .scroll-view_H{padding-right: 30rpx;}
	.c15{background: #f1f1f1;height: 340rpx;width: 340rpx;margin-right: 10rpx;}
	.c17{background: #f1f1f1;height: 165rpx;width: 340rpx;margin-bottom: 10rpx;}
	.c18{margin-bottom: 0;}
	.c19{background: #C6100E;border-radius:0 50rpx 50rpx 0;font-size: 24rpx;color: #fff;padding: 0rpx 20rpx;position: absolute;left: 10rpx;top: 130rpx;}
	.c20 image{width: 100%;display: block;}
	.c20{width: 600rpx;padding: 0 10rpx;}
	.c20 .c12{border:2rpx solid #f1f1f1;line-height: 70rpx;padding: 0 20rpx;}
</style>
<style>
	page{background: #fff;}
</style>